<template>
  <view class="bg-white">
    <!-- 店铺信息 -->
    <view class="store">
      <view
        class="store-name"
        @tap="toStoreList"
      >
        <image
          src="/static/images/menu/unfavorited.png"
          class="store-favorite-icon"
        />
        <text>蜜雪冰城（科技园区店）</text>
        <uni-icons
          type="right"
          size="16"
          color="#333"
        />
      </view>
      <view class="store-location">
        <uni-icons
          type="location"
          size="16"
          color="#777"
        />
        <text>直线距离568m</text>
      </view>
    </view>
    <!-- 公告 -->
    <view class="notice">
      <swiper
        class="notice-swiper"
        vertical
        circular
        autoplay
      >
        <swiper-item
          class="notice-item"
          v-for="(notice, index) in notices"
          :key="index"
        >
          <view class="notice-item-wrapper">
            <image
              src="/static/images/menu/notice.png"
              class="notice-icon"
            />
            <text>{{ notice }}</text>
          </view>
        </swiper-item>
      </swiper>
      <view class="notice-more">
        <text>查看更多</text>
        <uni-icons
          type="right"
          size="14"
          color="#777"
        />
      </view>
    </view>
    <!-- 导航 -->
  </view>
</template>
<script>
export default {
  name: "center-banner",
  data() {
    return {
      notices: ["珍惜粮食，按需点餐~", "进群领30元券包！"]
    }
  },
  computed: {
    indicatorWrapStyle() {
      const translatePercent = this.activeNavIndex * 100
      return `transform: translateX(${translatePercent}%); width: 25%;`
    }
  },
  methods: {
    toStoreList() {
      uni.navigateTo({
        url: "/pages/store/list/list"
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/static/app.scss";
.store {
  height: 114rpx;
  @include flex-column;
  justify-content: space-between;
  padding: $uni-spacing-row-base;

  &-name {
    @include flex-row-y-center;
    gap: $uni-spacing-row-sm;
    font-size: $uni-font-size-lg;
    font-weight: bold;
  }

  &-favorite-icon {
    width: 32rpx;
    height: 32rpx;
  }

  &-location {
    @include flex-row-y-center;
    gap: $uni-spacing-row-sm;
    font-size: $uni-font-size-sm;
    color: $uni-text-color-secondary;
  }
}

.notice {
  @include flex-row-y-center;
  justify-content: space-between;
  font-size: $uni-font-size-sm;
  color: $uni-text-color-secondary;
  padding: 0 $uni-spacing-row-base;

  &-swiper {
    flex: 1;
    height: 60rpx;
  }

  &-item {
    height: 60rpx;
    display: flex;
    align-items: center;
    &-wrapper {
      @include flex-row-y-center;
      gap: $uni-spacing-row-sm;
      font-size: $uni-font-size-sm;
      color: $uni-color-primary;
    }
  }

  &-item &-icon {
    width: 30rpx;
    height: 30rpx;
  }

  &-more {
    flex-shrink: 0;
    @include flex-row-y-center;
  }
}
</style>
